<script setup>
import {ref} from "vue";
import useTable from "@/composables/useTable";
import AppPage from "@/components/admin/layouts/AppPage.vue";

const title = '菜单管理 - 权限 - 设置'
const breadcrumbs = ref(['设置', '权限', '菜单管理'])

defineProps({
    data: {
        type: Array,
        default: () => []
    },
})

const {TableRef, bordered, scrollbar, scroll} = useTable()
</script>

<template>
    <app-page :breadcrumbs :title>
        <a-card :style="{ borderRadius: '8px'}" class="custom-card" title="菜单管理">
            <a-space :size="16" class="w-full" direction="vertical" fill>
                <a-alert title="温馨提示">
                    菜单管理只可有开发人员进行操作，
                    一般情况只需根据角色赋值权限即可，
                    开发人员可以通过数据填充的脚步进行操作，新增，修改，删除等操作。
                </a-alert>
                <a-table
                    ref="TableRef"
                    :bordered
                    :data="data"
                    :hide-expand-button-on-empty="true"
                    :pagination="false"
                    :scroll
                    :scrollbar
                    :default-expand-all-rows="false"
                    :show-empty-tree="false"
                    row-key="id"
                >
                    <template #columns>
                        <a-table-column :min-width="140" data-index="title" title="名称"/>
                        <a-table-column :width="80" data-index="icon" title="图标">
                            <template #cell="{ record }">
                                <svg-icon
                                    v-if="record.icon"
                                    :name="record.icon"
                                    :size="16"
                                    :style="{ color: 'var(--color-text-2)' }"
                                />
                            </template>
                        </a-table-column>
                        <a-table-column :min-width="220" data-index="name" ellipsis title="路由名称" tooltip/>
                        <a-table-column :width="220" data-index="redirect" ellipsis title="跳转" tooltip/>
                        <a-table-column :width="100" data-index="status" title="状态">
                            <template #cell="{ record }">
                                <a-tag :color="record.status === 1 ? 'cyan' : 'red'">
                                    {{ record.status === 1 ? '正常' : '禁用' }}
                                </a-tag>
                            </template>
                        </a-table-column>
                        <a-table-column :width="100" data-index="sort" title="排序"/>
                        <a-table-column :width="120" data-index="created_at" title="创建时间"/>
                    </template>
                </a-table>
            </a-space>
        </a-card>
    </app-page>
</template>

<style scoped>

</style>
